<template>
  <div
    id="account"
    class="frame-body"
    :class="{ 'frame-body-col-1': navbarCollapsed == false }"
  >
    <div class="container">
      <div class="left-menu">
        <sideBar :titleText="titleText" :categories="categories" />
      </div>
      <div
        class="product-navbar-collapse-wrapper"
        @click="collapseProductNavbar()"
      >
        <div class="product-navbar-collapse-inner">
          <div class="product-navbar-collapse-bg"></div>
          <div class="product-navbar-collapse">
            <a-icon type="left"></a-icon>
            <a-icon type="right"></a-icon>
          </div>
        </div>
      </div>
      <div class="right-container">
        <div class="console-container">
          <router-view @sideBarChange="sidebarChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sideBar from "../../../components/sideBar";
export default {
  data() {
    return {
      navbarCollapsed: false,
      titleText: "项目管理",
      categories: [
        {
          title: "概览",
          route: { name: "project_management_view", params: {} },
        },
        {
          title: "回收站(0)",
          route: { name: "project_management_view", params: {} },
        },
        {
          title: "待处理事件(0)",
          route: { name: "project_management_view", params: {} },
        },
        {
          title: "历史事件",
          route: { name: "project_management_view", params: {} },
        },
      ],
    };
  },
  components: {
    sideBar,
  },
  methods: {
    collapseProductNavbar() {
      this.navbarCollapsed = !this.navbarCollapsed;
    },
    sidebarChange(val) {
      if (val.titleText) this.titleText = val.titleText;
      if (val.categories) this.categories = val.categories;
    },
  },
};
</script>

<style scoped>
.console-container {
  padding: 0 15px;
}
</style>